<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
        <title>Slider</title>
	</head>
	<body>
		<script type="text/javascript" charset="utf-8">

		var ui = webix.ui({
			padding: 20,
			cols:[
				{},
				{
					width:450,
					rows:[
						{view:"form", id:"myform", elements:[
							{ view:"slider", type:"alt", label:"Level A", value:"20", name:"s1"},
							{ view:"slider", type:"alt",  label:"Level B", value:"50", name:"s2"},
							{ view:"slider", type:"alt",  label:"Level C", value:"80", name:"s3"}
						]},
						{view:"form", id:"myform2", elements:[
							{
								type:"clean",
								cols:[
									{},
									{ view:"button", type: "form", id:"slider_set", label:"Set values", click:"set()",  align:"right" },
									{ view:"button", id:"slider_get", label:"Get values", click:"get()",  align:"left" }
								]
							},
							{ view: "fieldset", label:"Data", body:{
								//view:"form",
								rows:[
									{ view:"text", label:"Value A", value:"0", name:"s1"},
									{ view:"text", label:"Value B", value:"100", name:"s2"},
									{ view:"text", label:"Value C", value:"12", name:"s3"}
								]
							}}
						]}
					]
				},
				{}
			]

		});

		function set(){
			var data = $$('myform2').getValues();
			$$('myform').setValues(data);
		};
		function get(){
			var data = $$('myform').getValues();
			$$('myform2').setValues(data);
		};
		</script>
		
	</body>
</html>